<template>
	<view v-if="!appIsAudit && load" class="group-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<back :showBackText="false" customClass="nav-back" :title="info.wx_group_title"></back>
		</view>
		
		<!-- 主要内容区域 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 群组信息卡片 -->
			<view class="group-info-card">
				<view class="card-header">
					<view class="group-icon">
						<text class="cuIcon-weixin"></text>
					</view>
					<text class="group-name">{{info.wx_group_name}}</text>
				</view>
				
				<!-- 群组二维码 -->
				<view class="qr-section">
					<view class="qr-container">
						<image 
							class="qr-image" 
							:src="info.wx_group_image" 
							show-menu-by-longpress="true" 
							mode="aspectFit"
						></image>
						<view class="qr-overlay">
							<text class="qr-tip">{{info.wx_group_scan_title}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 群组规则区域 -->
			<view class="rules-section">
				<view class="section-header">
					<view class="header-icon">
						<text class="cuIcon-markfill"></text>
					</view>
					<text class="header-title">{{info.wx_group_rule_title}}</text>
				</view>
				
				<view class="rules-list">
					<view 
						class="rule-item" 
						v-for="(value, index) in info.wx_group_rule_list" 
						:key="index"
					>
						<view class="rule-number">{{index + 1}}</view>
						<text class="rule-text">{{value}}</text>
					</view>
				</view>
			</view>
			
			<!-- 底部提示 -->
			<view class="bottom-tip">
				<text class="tip-text">长按识别二维码加入群聊</text>
			</view>
		</scroll-view>
	</view>
</template>
<style src="./group.css"></style>
<script src="./group.js"></script>